<template>
  <div id="equipmentTotal">
    <div class="content">
      <equipment-statistics
        class="hoverPointer"
        @changeSystem="changeSystem"
      ></equipment-statistics>
      <fire-system
        class="hoverPointer"
        v-if="activeSystem === 'showFireSystem'"
      ></fire-system>
      <air-conditioning-system
        class="hoverPointer"
        v-if="activeSystem === 'showAirSystem'"
      ></air-conditioning-system>
      <bpd-system
        class="hoverPointer"
        v-if="activeSystem === 'bpdSystem'"
      ></bpd-system>
      <dt-system
        class="hoverPointer"
        v-if="activeSystem === 'dtSystem'"
      ></dt-system>
      <nt-system
        class="hoverPointer"
        v-if="activeSystem === 'ntSystem'"
      ></nt-system>
      <znh-system
        class="hoverPointer"
        v-if="activeSystem == 'znhSystem'"
      ></znh-system>
      <equipment-warning></equipment-warning>
    </div>
  </div>
</template>
<script>
import EquipmentStatistics from "./tools/EquipmentStatistics.vue";
import FireSystem from "./tools/FireSystem.vue";
import airConditioningSystem from "./tools/airConditioningSystem.vue";
import EquipmentWarning from "./tools/EquipmentWarning.vue";
import bpdSystem from "./tools/bpdSystem.vue";
import dtSystem from "./tools/dtSystem.vue";
import ntSystem from "./tools/ntSystem.vue";
import znhSystem from "./tools/znhSystem.vue";

export default {
  components: {
    EquipmentStatistics,
    FireSystem,
    EquipmentWarning,
    airConditioningSystem,
    bpdSystem,
    dtSystem,
    ntSystem,
    znhSystem,
  },
  data () {
    return {
      activeSystem: "dtSystem",
    };
  },
  methods: {
    // 切换系统
    changeSystem (type) {
      this.activeSystem = type;
    },
  },
};
</script>
<style scoped>
#equipmentTotal {
  color: white;
  height: 2144px;
  background: url("../../../../static/images/rightBackground.png") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.content {
  width: 940px;
  float: right;
  padding: 5px 40px;
  height: 100%;
}
</style>
